<template>
  <div class="login-container">
    <img src="../../../src/assets/logo.svg" alt="" class="logo" />
    <div class="login-box">
      <h3>{{ t('common.projectName') }}</h3>
      <a-form
        class="form-box"
        ref="formRef"
        :model="formState"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item ref="name" :label="t('system.login.userName')" name="name">
          <a-input
            v-model:value="formState.name"
            :placeholder="t('system.login.verifyUserName')"
            autocomplete="off"
          />
        </a-form-item>
        <a-form-item
          ref="password"
          :label="t('system.login.password')"
          class="password-wrap"
          name="password"
        >
          <a-input
            v-model:value="formState.password"
            :placeholder="t('system.login.verifyPassword')"
            autocomplete="off"
          />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 2 }">
          <a-button
            type="primary"
            @click.prevent="onSubmit"
            style="width: 400px"
            class="login-btn"
            >{{ t('system.login.login') }}</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, UnwrapRef, computed } from 'vue';
  import { useRouter } from 'vue-router';
  import { useI18n } from 'vue-i18n';
  import { login } from '../../api';
  import { Md5 } from 'ts-md5/dist/md5';
  interface FormState {
    name: string;
    password: string;
  }
  const router = useRouter();
  const { t } = useI18n();
  const md5 = new Md5();
  const formRef = ref();
  const formState: UnwrapRef<FormState> = reactive({
    name: '',
    password: '',
  });
  const rules = computed(() => {
    return {
      name: [
        {
          required: true,
          message: '请输入用户名',
          trigger: 'blur',
        },
      ],
      password: [
        {
          required: true,
          message: '请输入密码',
          trigger: 'blur',
        },
      ],
    };
  });
  const onSubmit = () => {
    formRef.value.validate().then(() => {
      formState.name = 'admin';
      formState.password = 'admin';
      const param = {
        username: formState.name,
        password: md5.appendStr(formState.password).end(),
      };
      login(param).then((res: any) => {
        const { code } = res;
        if (code === 0) {
          router.push('/workbench');
        }
      });
    });
  };
  const labelCol = { span: 4 };
  const wrapperCol = { span: 16 };
</script>
<style scoped lang="less">
  .login-container {
    position: relative;
    background: url('../../../src/assets/bg.png') no-repeat center 0;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;

    .logo {
      width: 300px;
      height: 300px;
      margin-left: 20px;
    }

    .login-box {
      position: absolute;
      top: 20%;
      left: 60%;
      border-radius: 15px;
      width: 500px;
      height: 400px;
      padding: 20px;
      border: 1px solid #eaeaea;
      box-shadow: 0 0 25px #cac6c6;
      text-align: center;

      .login-btn {
        width: 300px;
        margin-top: 40px;
        height: 40px;
        border-radius: 20px;
      }
    }
  }
</style>
